<template>
<div>
    <div :id="cid" class="barCharts"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
  props: ["option", "chartId"],
  data() {
    return {
      cid: String(10 * Math.random())
    };
  },
  methods: {
    init() {
      window.addEventListener(
        "resize",
        function() {
          this.myChart.resize();
        }.bind(this)
      );
    },
    initChart() {
      var self = this;
      if (this.myChart) {
        this.myChart.clear();
        this.myChart.dispose();
      }
      self.option.background = "red";
      setTimeout(function() {
        self.myChart = echarts.init(document.getElementById(self.cid));
        self.myChart.setOption(self.option);
        self.init();
      }, 100);
    }
  }
};
</script>
<style scoped>
.barCharts {
  min-width: 500px;
  min-height: 924px;
}
</style>